<template>
	<view>
		<view class="head">
			<view class="top">
				<view class="top-l">
					<view class="left">
						<image src="../../static/pho0.jpg" mode=""></image>
					</view>
					<view class="content">
						<view class="text">
							<text>用户名称</text>
							<image src="" mode=""></image>
							<image src="" mode=""></image>
						</view>
						<view class="text-b">
							查看或编辑我的主页
						</view>
					</view>
				</view>
				<view class="right">
					<image src="" mode=""></image>
				</view>
			</view>
			<view class="bottom">
				<view class="b-left">
					<view class="number">
						30
					</view>
					<view class="text">
						被喜欢
					</view>
				</view>
				<!-- <view class="b-right">
					<view class="number">
						30
					</view>
					<view class="text">
						喜欢
					</view>
				</view> -->
			</view>
		</view>
		<!-- 我的会员 -->
		<view class="vip">
			<view class="vip-top">
				<view class="left">
					<view class="l-t">
						<image src="" mode=""></image>
						<text>我的会员</text>
					</view>
					<view class="l-b">
						专属特权，凸显身份尊贵
					</view>
				</view>
				<view class="right">
					<view class="r-c">
						开通会员 >
					</view>
				</view>
			</view>
			<view class="vip-content">
				<view class="vc-left">
					<view class="num">
						今日滑动次数
					</view>
					<view class="pic">
						<image src="" mode=""></image>
					</view>
					<view class="leave">
						<text>100</text>
						/200
					</view>
					<view class="leaveAll">
						剩余/总次数
					</view>
				</view>
				<view class="vc-right">
					<view class="myVip">
						<view class="m-l">
							<image src="" mode=""></image>
							<text>我的会员</text>
						</view>
						<view class="m-r">
							已开通 >
						</view>
					</view>
					<view class="Invitation">
						<view class="m-l">
							<image src="" mode=""></image>
							<text>邀请码</text>
						</view>
						<view class="m-r">
							增加5次 >
						</view>
					</view>
					<view class="friend">
						<view class="m-l">
							<image src="" mode=""></image>
							<text>邀请好友</text>
						</view>
						<view class="m-r">
							邀请一位加10次 >
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--钻石 收入 -->
		<view class="recharge">
			<view class="r-top">
				<text>查看详情 ></text>
			</view>
			<view class="content">
				<view class="c-left">
					<view class="diamonds">
						<image src="" mode=""></image>
						<text>996</text>
					</view>
					<view class="myDiamonds">
						我的钻石
					</view>
					<view class="invest">
						充值
					</view>
				</view>
				<view class="c-right">
					<view class="diamonds">
						<image src="" mode=""></image>
						<text>250</text>
					</view>
					<view class="myDiamonds">
						我的收入
					</view>
					<view class="invest">
					提现
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
page{
		background: #EAEAEA;
		padding: 10upx 10upx 20upx 10upx;
	}
	.head{
		padding: 20upx 40upx;
		border-radius: 20upx;
		background: white;
		.top{
			display: flex;
			justify-content: space-between;
			.top-l{
				display: flex;
				.left{
					display: flex;
					align-items: center;
					image{
						width: 72upx;
						height: 72upx;
						border-radius: 50%;
					}
				}
				
				.content{
					padding-left: 20upx;
					.text{
						font-size: 30upx;
						display: flex;
						align-items: center;
						 image{
							width: 32upx;
							height: 32upx;
							background: pink;
							margin-left: 10upx;
						}
					}
					.text-b{
						font-size: 24upx;
						padding-top: 10upx;
					}
				}
			}
			
			
			.right{
				display: flex;
				align-items: center;
				image{
					width: 48upx;
					height: 48upx;
					background: pink;
				}
			
			}
		}
		.bottom{
			 direction: flex;
		     // justify-content: space-between;
			 flex-direction: row;
			.b-left{
				padding: 40upx;
				width: 200upx;
				.number{
					font-size: 40upx;
					font-weight: 700;
				}
				.text{
					font-size: 28upx;
				}
			}
			.b-right{
				padding: 40upx;
				width: 200upx;
			}
		}
	}
	.vip{
		background: white;
		border-radius: 20upx 20upx 0 0;
		margin-top: 20upx;
		.vip-top{
			padding: 35upx;
			display: flex;
			justify-content: space-between;
			background: #FFC979;
			border-radius: 20upx 20upx 0 0;
			.left{
				.l-t{
					font-size: 28upx;
					display: flex;
					align-items: center;
					image{
						width: 32upx;
						height: 32upx;
						padding: 10upx;
						border: 2upx solid black;
					}
				}
				.l-b{
					font-size: 24upx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				.r-c{
					padding: 10upx 15upx 10upx 40upx;
					background: #FF9800;
					color: white;
					font-size: 24upx;
					border-radius: 10upx;
				}
				
			}
		}
		.vip-content{
			padding: 10upx;
			font-size: 26upx;
			display: flex;
			.vc-left{
				// background: red;
				border-right:2upx solid #CBCBCB;
				padding: 20upx 40upx;
				view{
					padding: 5upx 0;
				}
				.pic{
					image{
						width: 100upx;	
						height: 100upx;	
				    	padding: 10upx;			
			    		border:2upx solid gray;
					}
				}
			}
			.vc-right{
				padding: 10upx 40upx ;
			
				view{
					display: flex;
					padding: 15upx 0;
					justify-content: space-between;
				}
				image{
					width: 32upx;
					height: 32upx;
					margin-right: 20upx;
					border: 2upx solid #2C405A;
				}
				.myVip,.Invitation{
					border-bottom: 2upx solid #555555;
				}
				
					.m-r{
						margin-left: 30upx;
					}
				
			}
			
		}
	}
	.recharge{
		padding: 10upx;
		background: white;
		margin-top: 20upx;
		.r-top{
			font-size: 22upx;
			overflow: hidden;
			text{
				float: right;
				padding: 20upx;
			}
		}
		.content{
			display: flex;
			justify-content: space-around;
			
			.c-left,.c-right{
				font-size: 24upx;
				.diamonds{
					text{
						font-size: 45upx;
						font-weight: 700;
					}
					image{
						width: 32upx;
						height: 32upx;
						margin-right: 20upx;
						border: 2upx solid #2C405A;
					}
				}
				.myDiamonds{
					display: flex;
					justify-content: center;
					align-items: center;
					padding:5upx 0 25upx 0;
				}
				.invest{
					display: flex;
					justify-content: center;
					align-items: center;
					background:#FFC979;
					padding: 10upx 50upx;
					border-radius: 30upx;
					color: white;
					font-size: 26upx;
				}
			}
			
		}
	}
</style>
